$(function() {
    //**************************************加载列表轮播图
    function getList() {
        $.ajax({
            url: "admin/swipers",
            type: "GET",
            success: function(res) {
                // console.log(res);

                if (res.status == 0) {
                    // console.log(res);

                    let str = ''
                    res.data.forEach(item => {
                        let str1 = ""
                        if (item.swiperstatus === 1) {
                            str1 += ` <tr>
          <td>${item.id}</td>
          <td>
            <img src="http://127.0.0.1:8888/uploads/${item.swiperimg}">
          </td>
          <td>${item.swiperlink}</td>
          <td class= "stu" data-id="${item.id}" >
            <!-- 在使用 -->
            启用
            <span class="layui-badge layui-bg-green">√</span>
          </td>
          <td>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" data-del="${item.id}">
              删除
            </button>
          </td>
        </tr>`
                            str += str1;

                        } else {
                            str1 += ` <tr>
          <td>${item.id}</td>
          <td>
            <img src="http://127.0.0.1:8888/uploads/${item.swiperimg}">
          </td>
          <td>${item.swiperlink}</td>
          <td class= "stu" data-id="${item.id}">
            <!-- 在使用 -->
            禁用
            <span class="layui-badge layui-bg-cyan">×</span>
          </td>
          <td>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" data-del="${item.id}">
              删除
            </button>
          </td>
        </tr>`
                            str += str1;

                        }
                    })
                    $("tbody").html(str)
                }
            }
        });
    }
    getList();


    // *************************************轮播图状态切换  使用还是未使用
    $("tbody").on("click", ".stu", function() {

        // 1.获取自定义属性的值
        let id = $(this).attr("data-id");
        let status = 1;
        if ($(this).text().includes("启用") === true) {
            status = 2;
        }


        // 2.ajax提交
        $.ajax({
            url: "admin/swipers/" + id,
            type: "PUT",
            data: {
                status,
            },
            success: function(res) {
                console.log(res);

                getList();
            }
        })

        // *************************************轮播图状态切换  使用还是未使用

        // ***************************************删除操作
        $('tbody').on('click', '.delete', function() {

            // 在询问之前，先获取id
            var id = $(this).attr('data-del');
            // console.log(id);
            layer.confirm('确定删除吗？', {
                icon: 3,
                title: '提示'
            }, function(index) {
                $.ajax({
                    // dataType: "jsonp",
                    type: 'DELETE',
                    url: 'admin/swipers/' + id,
                    success: function(res) {
                        layer.msg(res.message);
                        if (res.status === 0) {
                            // console.log(res);
                            // 删除成功，重新渲染
                            // $("tbody").html(str);
                            getList();
                        }
                    }
                });
                // console.log(123);
            });
        });

        // ***************************************上传文件
        $('body').on('click', '#uploadSwiper', function() {
            $('#myfile').click()
        })

        // 监听文件选中事件
        $('body').on('change', '#myfile', function(e) {
            let files = e.target.files
            console.log(files);
            var fd = new FormData()
            $.each(files, function(index, item) {
                fd.append('swipers', item)
            });
            fd.forEach(function(val, key) {
                console.log(val, key);
            });
            let str = ""
            $.ajax({
                url: "admin/swipers",
                type: "POST",
                processData: false,
                contentType: false,
                data: fd,
                success: function(res) {
                    console.log(res);
                    if (res.status == 0) {
                        layer.msg(res.message);
                        // load();
                        getList()
                    }
                }

            });
        });
    });
});